<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作节点——修改——修改样式（修改style）</title>
    <style type="text/css">

    </style>
</head>
<body>

    <div id="container" >

        <div id="other" style="background-color: aqua ; text-align: center;border: 10px solid #ff0000;width: 200px ; height: 50px">
            杂项
        </div>
    </div>
    <button type="button" onclick="changeStyle()">点击我，进行修改样式</button>
<script type="text/javascript">
    function changeStyle() {
        // 修改样式 : 其实就是修改对应的 style 中的值
        // 1、获取元素
        let div = document.querySelector("#other") ;
        console.log( div ) ;
        // 2、获取style 中的值
        console.log( div.style ) ;
        console.log( div.style["background-color"] )
        // 3、修改
        // 可以将 style 当成一个 键值对组成的集合， 通过 中括号进行修改
        // div.style["background-color"] = "#2233ff" ;

        // 这种写法是最常见的写法
        div.style.backgroundColor = "#2233ff" ;



    }



</script>


</body>
</html>